<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>门票管理</title>

    <script src="/js/vue.js"></script>
    <script src="/js/index.js"></script>
    <link rel="stylesheet" href="/css/index.css">
    <script src="/js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-row :gutter="20">
        <el-col :span="5">
            <el-input v-model="name" placeholder="请输入票名" size="small"></el-input>
        </el-col>
        <el-col :span="3">
            <el-button type="success" size="small" icon="el-icon-search" @click="search">搜索</el-button>
        </el-col>
        <el-col :span="3">
            <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="handleAdd">添加</el-button>
        </el-col>
        <el-col :span="3">
            <el-button type="primary" size="small" icon="el-icon-refresh" @click="refresh">刷新</el-button>
        </el-col>
        <el-col :span="10"></el-col>
    </el-row>

    <el-row>
        <el-col :span="24">

        </el-col>
    </el-row>

    <!--table数据-->
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                fixed
                prop="scenic.name"
                label="景区名称"
                width="250">
        </el-table-column>
        <el-table-column
                prop="name"
                label="门票名称"
                width="120">
        </el-table-column>
        <el-table-column
                prop="startrq"
                label="门票使用有效期"
                width="160">
        </el-table-column>
        <el-table-column
                prop="endrq"
                label="门票最大使用有效期"
                width="180">
        </el-table-column>
        <el-table-column
                prop="oprice"
                label="门市价"
                width="100">
        </el-table-column>
        <el-table-column
                prop="dprice"
                label="乐乐价"
                width="100">
        </el-table-column>
        <el-table-column
                prop="ptype"
                label="支付方式"
                :formatter="iscycle"
                width="100">
        </el-table-column>
        <el-table-column
                prop="fkqx"
                label="付款"
                width="100">
        </el-table-column>
        <el-table-column
                prop="qpqx"
                label="取票期间"
                width="100">
        </el-table-column>
        <el-table-column
                prop="maxdaysell"
                label="单日最大允许销售量"
                width="160">
        </el-table-column>
        <el-table-column
                prop="maxdaypersonsell"
                label="同一用户单日最大允许订票数"
                width="210">
        </el-table-column>
        <el-table-column
                prop="maxsingledeal"
                label="同一订单最大允许订票数"
                width="200">
        </el-table-column>
        <el-table-column
                prop="isgd"
                label="是否允许改订单"
                :formatter="isgd"
                width="160">
        </el-table-column>
        <el-table-column
                prop="stnotice"
                label="须知"
                width="200">
        </el-table-column>
        <el-table-column
                prop="ttype"
                label="门票类型"
                width="180">
        </el-table-column>
        <!-- <el-table-column
                 prop="isclient"
                 label="是否手机专属"
                 width="120">
         </el-table-column>-->
        <el-table-column
                prop="yssx"
                label="预售时限"
                width="120">
        </el-table-column>
        <el-table-column
                prop="qptype"
                label="取票方式"
                width="100">
        </el-table-column>
        <el-table-column
                prop="yss"
                label="预售数"
                width="100">
        </el-table-column>
        <el-table-column
                prop="predays"
                label="提前多少天展示"
                width="120">
        </el-table-column>
        <el-table-column
                prop="sufdays"
                label="延迟多少天展示"
                width="120">
        </el-table-column>
        <el-table-column
                prop="dpj"
                label="点评奖"
                width="100">
        </el-table-column>
        <el-table-column
                prop="xjq"
                label="现金卷"
                width="100">
        </el-table-column>
        <el-table-column
                prop="istodayshow"
                label="是否web显示每日更新"
                :formatter="istodayshow"
                width="170">
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="260">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <!--添加或者更新的form表单-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="景区名称" :label-width="formLabelWidth">
                <el-select v-model="value" filterable placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="门票名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off" placeholder="必填项"></el-input>
            </el-form-item>
            <el-form-item label="门票使用有效期" :label-width="formLabelWidth">
                <el-input v-model="form.startrq" autocomplete="off" placeholder="必填项"></el-input>
            </el-form-item>
            <el-form-item label="门票使用有效期" :label-width="formLabelWidth">
                <el-input v-model="form.endrq" autocomplete="off" placeholder="必填项"></el-input>
            </el-form-item>
            <el-form-item label="门市价" :label-width="formLabelWidth">
                <el-input v-model="form.oprice" autocomplete="off" placeholder="必填项"></el-input>
            </el-form-item>
            <el-form-item label="乐乐价" :label-width="formLabelWidth">
                <el-input v-model="form.dprice" autocomplete="off" placeholder="必填项"></el-input>
            </el-form-item>
            <el-form-item label="支付方式" :label-width="formLabelWidth">
                <el-select v-model="form.ptype" placeholder="请选择">
                    <el-option label='景区支付' value=1></el-option>
                    <el-option label='在线支付' value=2></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="付款" :label-width="formLabelWidth">
                <el-input v-model="form.fkqx" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="取票期间" :label-width="formLabelWidth">
                <el-input v-model="form.qpqx" autocomplete="off" placeholder="必填项"></el-input>
            </el-form-item>
            <el-form-item label="单日最大允许销售量" :label-width="formLabelWidth">
                <el-input v-model="form.maxdaysell" autocomplete="off" placeholder="必填项"></el-input>
            </el-form-item>
            <el-form-item label="同一用户单日最大允许订票数" :label-width="formLabelWidth">
                <el-input v-model="form.maxdaypersonsell" autocomplete="off" placeholder="必填项"></el-input>
            </el-form-item>
            <el-form-item label="同一订单最大允许订票数" :label-width="formLabelWidth">
                <el-input v-model="form.maxsingledeal" autocomplete="off" placeholder="必填项"></el-input>
            </el-form-item>
            <el-form-item label="是否允许改订单" :label-width="formLabelWidth">
                <el-select v-model="form.isgd" placeholder="请选择">
                    <el-option label='是' value=0></el-option>
                    <el-option label='否' value=1></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="须知" :label-width="formLabelWidth">
                <el-input v-model="form.stnotice" autocomplete="off" placeholder="必填项"></el-input>
            </el-form-item>
            <el-form-item label="门票类型" :label-width="formLabelWidth">
                <el-input v-model="form.ttype" autocomplete="off"></el-input>
            </el-form-item>
            <!-- <el-form-item label="是否手机专属" :label-width="formLabelWidth">
                 <el-input v-model="form.isclient" autocomplete="off"></el-input>
             </el-form-item>-->
            <el-form-item label="预售时限" :label-width="formLabelWidth">
                <el-input v-model="form.yssx" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="取票方式" :label-width="formLabelWidth">
                <el-input v-model="form.qptype" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="预售数" :label-width="formLabelWidth">
                <el-input v-model="form.yss" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="提前多少天展示" :label-width="formLabelWidth">
                <el-input v-model="form.predays" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="延迟多少天展示" :label-width="formLabelWidth">
                <el-input v-model="form.sufdays" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="点评奖" :label-width="formLabelWidth">
                <el-input v-model="form.dpj" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="现金卷" :label-width="formLabelWidth">
                <el-input v-model="form.xjq" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否web显示" :label-width="formLabelWidth">
                <el-select v-model="form.istodayshow" placeholder="请选择">
                    <el-option label='是' value=0></el-option>
                    <el-option label='否' value=1></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addOrUpdate">确 定</el-button>
        </div>
    </el-dialog>


</div>
</body>
<script>
    var vue=new Vue({
        el:'#app',
        data(){//存放所有的属性数据
            return{//方便编写表单校验
                tableData: [],//表格数据
                currentPage: 1,//当前页数
                pageSize: 5,//每页的数量
                total: 100,//总条数
                dialogFormVisible: false, //是否显示对话框
                title: '门票添加',
                name:'',
                form:{
                    scenicid:'',
                    name:'',
                    startrq:'',
                    endrq:'',
                    oprice:'',
                    dprice:'',
                    ptype:'',
                    fkqx:'',
                    qpqx:'',
                    maxdaysell:'',
                    maxdaypersonsell:'',
                    maxsingledeal:'',
                    isgd:'',
                    stnotice:'',
                    ttype:'',
                    isclient:'',
                    yssx:'',
                    qptype:'',
                    yss:'',
                    predays:'',
                    sufdays:'',
                    dpj:'',
                    xjq:'',
                    istodayshow:''
                },
                formLabelWidth: '120px',


                options:[],//存放景区信息
                value:'',
            }

        },
        created:function (){//页面初始化时，需要执行的业务可以放入该方法
            this.loadData();
            this.getScenic();
        },
        methods:{//存放所有使用的方法（函数）

            // 封装请求数据的方法
            loadData() {
                var _this = this;
                // 使用axios向后台发请求
                axios.post('/tst/queryPage', {
                    "pageNo": this.currentPage, "pageSize": this.pageSize, "data": {
                        "name": this.name
                    }
                }).then(function (response) { //回调函数
                    console.log(response);
                    if (response.data.code == 200) {
                        _this.tableData = response.data.data.list;
                        _this.total = response.data.data.total;
                    }
                })
                    .catch(function (error) {//处理异常
                        console.log(error);
                    });
            },


            //跳转更新
            handleEdit(index, row) {
                console.log(index, row);
                this.dialogFormVisible = true; //让对话框显示
                this.title = "门票更新"; //让title的值改变
                this.form = row; //给表单赋值
                // alert(JSON.stringify(row));
                this.value=row.scenicid;
            },
            //跳转添加
            handleAdd() {
                this.dialogFormVisible = true; //让对话框显示
                this.title = "门票添加"; //让title的值改变
                this.form = {}; //让form表单清空

            },

            //支付方式（1:景区支付，2：在线支付）
            //是否自动
            iscycle(row, column, cellValue, index){
                var returnValue='';
                if (cellValue==1){
                    returnValue="景区支付";
                }else if(cellValue==2){
                    returnValue="在线支付";
                }
                return returnValue;
            },
            //是否web显示
            istodayshow(row, column, cellValue, index){
                var returnValue='';
                if (cellValue==0){
                    returnValue="是";
                }else if(cellValue==1){
                    returnValue="否";
                }
                return returnValue;
            },

            //是否允许改单
            isgd(row, column, cellValue, index){
                var returnValue='';
                if (cellValue==0){
                    returnValue="是";
                }else if(cellValue==1){
                    returnValue="否";
                }
                return returnValue;
            },

            //处理添加或者更新
            addOrUpdate() {
                var uri = "/tst/add";
                if (this.title == "门票更新") {
                    uri = "/tst/update";
                }
                //定义变量
                var _this = this;
                //把下拉框选择的景区名称对应的景区id赋值给form表单里面的scenicid
                this.form.scenicid=this.value;
                // 使用axios向后台发请求
                axios.post(uri,  //请求的url
                    this.form) //请求的参数，json格式
                    .then(function (response) { //回调函数
                        console.log(response);//前端控制台打印，response是json对象
                        console.log(JSON.stringify(response));
                        //response获取后台数据书，一定要加data,  response.data相当于从响应的body中获取数据
                        if (response.data.code == 200) {
                            //提示成功
                            _this.$message({
                                message: '执行成功',
                                type: 'success'
                            });
                            //关闭弹框
                            _this.dialogFormVisible = false;
                            //重新加载数据
                            _this.loadData();
                        } else {
                            _this.$message.error('执行失败');
                        }
                    })
                    .catch(function (error) {//异常处理
                        console.log(error);
                    });
            },

            //删除
            handleDelete(index, row) {
                console.log(index, row);
                //定义变量
                var _this = this;
                this.$confirm('确定删除该数据?', '提示', {
                    type: 'warning'
                }).then(() => {
                    axios.delete('/ticket/delete/' + row.id).then(function (response) {
                        if (response.data.code == 200) {
                            //提示成功
                            _this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            //重新加载数据
                            _this.loadData();
                        } else {
                            _this.$message.error('删除失败');
                        }
                    }).catch((error) => {//异常处理
                        console.log("删除失败的原因：", error)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                })
            },

            //每页数量发生变化
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                //  调用加载数据的方法
                this.loadData();
            },
            //页码发生变化
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                // 调用加载数据的方法
                this.loadData();
            },
            //搜索方法
            search(){
                this.loadData();
            },
            //刷新
            refresh(){
                location.reload();
            },

            //查询所有景区
            getScenic() {
                var _this = this;
                // 使用axios向后台发请求
                axios.get("/scenic/queryAll")
                    .then(function (response) { //回调函数
                        // alert(JSON.stringify(_this.options.data));
                        //response获取后台数据书，一定要加data,  response.data相当于从响应的body中获取数据
                        if (response.data.code == 200) {
                            _this.options = response.data.data;
                            // alert(JSON.stringify(_this.options));//前端控制台打印
                        } else {
                            _this.$message.error('执行失败');
                        }
                    })
                    .catch(function (error) {//异常处理
                        console.log(error);
                    });
            }
        }
    })
</script>
</html>